<style>
	table.gridtable {
		font-size:11px;
		color:#333333;
		border-width: 1px;
		border-color: #666666;
		border-collapse: collapse;
	}
	table.gridtable th {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #dedede;
	}
	table.gridtable td {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #ffffff;
	}
</style>

<div class="container">
	<h1 align="center">Grafik Pertumbuhan Penduduk</h1>
	<p></p>
	<div class="content">
		<div id="diagram" style="width:100%;height:450px" align="center">
			<canvas id="graph" height="400"></canvas>
		</div>
	</div>	
</div>

<script>
			// Canvas Funct

			var canvas = document.querySelector('canvas');
			fitToContainer(canvas);

			function fitToContainer(canvas){
			  // Make it visually fill the positioned parent
			  canvas.style.width ='90%';
			  canvas.style.height='90%';
			  // ...then set the internal size to match
			  canvas.width  = canvas.offsetWidth;
			  canvas.height = canvas.offsetHeight;
			}
	
            // Bar Chart Data
	        <?php
				$phpArr = $lblDiagram;
				$jsArr = json_encode($phpArr);
				echo "var labelArr = ". $jsArr . ";\n";
			?>
			<?php
				$jsArr1 = json_encode($perTahun);
				echo "var perTahun = ". $jsArr1 . ";\n";
			?>

			// console.log(perTahun);

	        var data = {
			    labels: labelArr,
			    datasets: [
			        {
			            label: "Jumlah Penduduk",
			            fillColor: "rgba(151,187,205,0.2)",
			            strokeColor: "rgba(151,187,205,1)",
			            pointColor: "rgba(151,187,205,1)",
			            pointStrokeColor: "#fff",
			            pointHighlightFill: "#fff",
			            pointHighlightStroke: "rgba(151,187,205,1)",
			            data: perTahun
			        }
			    ]
			};

			// Bar Chart Option
			var options =
			{

			    ///Boolean - Whether grid lines are shown across the chart
			    scaleShowGridLines : true,

			    //String - Colour of the grid lines
			    scaleGridLineColor : "rgba(0,0,0,.05)",

			    //Number - Width of the grid lines
			    scaleGridLineWidth : 1,

			    //Boolean - Whether to show horizontal lines (except X axis)
			    scaleShowHorizontalLines: true,

			    //Boolean - Whether to show vertical lines (except Y axis)
			    scaleShowVerticalLines: true,

			    //Boolean - Whether the line is curved between points
			    bezierCurve : true,

			    //Number - Tension of the bezier curve between points
			    bezierCurveTension : 0.4,

			    //Boolean - Whether to show a dot for each point
			    pointDot : true,

			    //Number - Radius of each point dot in pixels
			    pointDotRadius : 4,

			    //Number - Pixel width of point dot stroke
			    pointDotStrokeWidth : 1,

			    //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
			    pointHitDetectionRadius : 20,

			    //Boolean - Whether to show a stroke for datasets
			    datasetStroke : true,

			    //Number - Pixel width of dataset stroke
			    datasetStrokeWidth : 2,

			    //Boolean - Whether to fill the dataset with a colour
			    datasetFill : true,

			    //String - A legend template
			    legendTemplate : '<ul class=\"<%=name.toLowerCase()%>-legend\">'
								    	+'<% for (var i=0; i<datasets.length; i++) { %>'
					                    +'<li>'
						                    +'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
						                    +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
						                  +'</li>'
					                	+'<% } %>'
					              	+'</ul>',

			    // String - Template string for single tooltips
			    tooltipTemplate: "<%= label %> : <%= value %> Orang",

			};
	

            // get bar chart canvas
            var graph= $("#graph").get(0).getContext("2d");
            // draw pie chart
            new Chart(graph).Line(data, options);
</script>